<template>
<div> 
  <!-- 首页轮播图 用 mint-ui的swipe组件-->
  <mt-swipe :auto="4000"  >
    <mt-swipe-item v-for="item in lbtlist" :key="item.url">
      <img :src="item.img" alt="">
    </mt-swipe-item>
  </mt-swipe>
  <!-- 六宫格图标 用MUI的gird.html-->
  <ul class="mui-table-view mui-grid-view mui-grid-9">
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
      <router-link to="/home/newslist">
        <img src="../../images/menu1.png" alt="">
        <div class="mui-media-body">新闻资讯</div>
      </router-link>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
      <router-link to="/home/photolist">
        <img src="../../images/menu2.png" alt="">
        <div class="mui-media-body">图片分享</div>
      </router-link>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
      <router-link to='/home/goodslist'>
        <img src="../../images/menu3.png" alt="">
        <div class="mui-media-body">商品购买</div>
      </router-link>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
      <a href="#">
        <img src="../../images/menu4.png" alt="">
        <div class="mui-media-body">留言反馈</div>
      </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
      <a href="#">
        <img src="../../images/menu5.png" alt="">
        <div class="mui-media-body">视频专区</div>
      </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
      <a href="#">
        <img src="../../images/menu6.png" alt="">    
        <div class="mui-media-body">联系我们</div>
      </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
      <a href="#">
        <img src="../../images/menu4.png" alt="">
        <div class="mui-media-body">留言反馈</div>
      </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
      <a href="#">
        <img src="../../images/menu5.png" alt="">
        <div class="mui-media-body">视频专区</div>
      </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
      <a href="#">
        <img src="../../images/menu6.png" alt="">    
        <div class="mui-media-body">联系我们</div>
      </a>
    </li>
  </ul>
</div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
  data(){
    return{
      //从缓存中获取数据，防止每次都是空数组。
      lbtlist:JSON.parse(window.localStorage.getItem("lbtlist")||'[]'),//JSON.parse(null||'[]')防止报错,//获取首页轮播图列表
      
    }
  },
  created(){
    //页面加载就获取lbt列表
    this.getlbtlist()
  },
  methods:{
    //定义轮播图数据获取方法
    getlbtlist(){
      this.$axios.get("/getlunbo").then(res=>{
        //如果status为0表示有最新的数据，那么把新数据存到缓存中
        //这样没有数据的时候就用老数据，表示没有更新，否则更新数据
        if(res.data.status===0){
          console.log(res.data)
          window.localStorage.setItem('lbtlist',JSON.stringify(res.data.message))  
        }else{
          Toast('轮播图未更新')
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
  
}
</script>

<style lang="scss" scoped>
/*
 mint-ui中的轮播图swipe分三层，
 - mint-swipe
  -mint-swipe-items-wrap 图片
    -mint-swipe-item
  -mint-swipe-indicators 圆点
    -mint-swipe-indicator
*/
  .mint-swipe{
    height: 200px;
    .mint-swipe-item{
      &:nth-child(1){/*&是交替选择器，:nth-child(1)是选择第一个后代*/
        background-color: red;
      }
      &:nth-child(2){
        background-color: blue;
      }
      &:nth-child(3){
        background-color: cyan;
      }
      img{
        width: 100%;
        height: 100%;
      }
     
      
    }
  }
  /*修改六宫格的背景和去掉边框*/
  .mui-grid-view.mui-grid-9{
    background-color: white;
    border: 0;
    img{//原图的像素是120px，移动端应为其一半。
      width: 60px;
      height: 60px;
    }
    
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border: 0;
  }
  .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
      font-size: 12px;
  }

</style>